<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>

      <script src="../js/jquery-3.6.0.min.js"></script>
      <script type="text/javascript">

        //定义删除员工的函数，以作为主键的用户名作为删除条件
        function delEmp(username){
          $("tr#"+username).remove();
        }


        $(function (){

          //给年龄和薪资设定格式标准
          var pattern_age = /^\d+$/;
          var pattern_salary = /^\d+\.\d+$/;

          //获取三个输入信息的文本框jquery对象
          //添加和修改都需要用到这三个对象，提出到全局变量
          var username = $("#username");
          var age = $("#age");
          var salary = $("#salary");

          //给添加员工按钮绑定点击事件
          $("#addEmp").click(function (){

            //通过对象获取相应的值
            var usernameValue = username.val();
            var ageValue = age.val();
            var salaryValue = salary.val();

            //按照姓名去已添加的员工列表中查找，看是否能找到相同的姓名
            var isContainsUsername = $("tr td:contains("+usernameValue+")").text();

            //如果列表中没有此姓名，可以添加
            if(isContainsUsername == ""){

              if(pattern_age.test(ageValue) && pattern_salary.test(salaryValue)){
                //拼接一行数据的html，并封装成jquery对象
                var tr = $("<tr id='"+usernameValue+"'><td>"+usernameValue+"</td>" +
                        "<td>"+ageValue+"</td>" +
                        "<td>"+salaryValue+"</td>" +
                        "<td onclick='delEmp(\""+usernameValue+"\")'>删除</td></tr>");

                //把这个对象添加到table标签内部的最下面
                $("table#empInfo").append(tr);
                username.val("");
                age.val("");
                salary.val("");
                username.focus();

              }else{
                alert("年龄或薪资必须是数字");
                age.focus();
              }
            }else{
              //如果列表中有此姓名，不允许添加
              alert("此员工已经添加过了");
              username.val("");
              age.val("");
              salary.val("");
              username.focus();
            }
          });

          //给修改员工按钮绑定点击事件
          $("#modifyEmp").click(function (){
            //通过对象获取相应的值
            var usernameValue = username.val();
            var ageValue = age.val();
            var salaryValue = salary.val();

            //按照姓名去已添加的员工列表中查找，看是否能找到相同的姓名
            var isContainsUsername = $("tr td:contains("+usernameValue+")").text();

            //如果列表中没有此姓名，可以添加
            if(isContainsUsername != ""){
              //如果年龄和薪资都符合条件，可以修改
              if(pattern_age.test(ageValue) && pattern_salary.test(salaryValue)){

                //拼接一行数据的html，并封装成jquery对象
                var tr = $("<tr id='"+usernameValue+"'><td>"+usernameValue+"</td>" +
                        "<td>"+ageValue+"</td>" +
                        "<td>"+salaryValue+"</td>" +
                        "<td onclick='delEmp(\""+usernameValue+"\")'>删除</td></tr>");

                //把这个对象添加到table标签内部的最下面
                $("tr#"+usernameValue).replaceWith(tr);
                username.val("");
                age.val("");
                salary.val("");
                username.focus();
              }else{
                alert("年龄或薪资必须是数字");
                age.focus();
              }
            }else{
              alert("没有此员工信息，无法修改");
              username.val("");
              age.val("");
              salary.val("");
              username.focus();
            }
          })

          //为了避免代码冗余 可以添加和修改可以只有一个按钮
          //如果主键存在就修改，如果主键不新增就添加
          $("#addOrModifyEmp").click(function (){
            //通过对象获取相应的值
            var usernameValue = username.val();
            var ageValue = age.val();
            var salaryValue = salary.val();

            //按照姓名去已添加的员工列表中查找，看是否能找到相同的姓名
            var isContainsUsername = $("tr td:contains("+usernameValue+")").text();

            //不管是添加还是修改，都需要先判断年龄和薪资的格式
            if(pattern_age.test(ageValue) && pattern_salary.test(salaryValue)) {

              //拼接一行数据的html，并封装成jquery对象
              var tr = $("<tr id='"+usernameValue+"'><td>"+usernameValue+"</td>" +
                      "<td>"+ageValue+"</td>" +
                      "<td>"+salaryValue+"</td>" +
                      "<td onclick='delEmp(\""+usernameValue+"\")'>删除</td></tr>");

              //如果列表中没有此姓名，添加
              if(isContainsUsername == ""){

                //把这个对象添加到table标签内部的最下面
                $("table#empInfo").append(tr);

              }else{
                  //如果列表中有此姓名，修改
                  //把这个对象添加到table标签内部的最下面
                  $("tr#"+usernameValue).replaceWith(tr);

              }
              username.val("");
              age.val("");
              salary.val("");
              username.focus();
            }else{
              //如果年龄或薪资的格式不正确，给提示
              alert("年龄或薪资必须是数字");
              age.focus();
            }

          })

        })




      </script>

      <style type="text/css">
        div.center{
          text-align: center;
        }

      </style>
  </head>
  <body>

    <div>

      <div class="center">
        <p class="center">员工操作界面</p>
        姓名：<input type="text" id="username"/>
        年龄：<input type="text" id="age"/>
        薪资：<input type="text" id="salary"/>
        <br/><br/>
        <input type="button" value="添加员工" id="addEmp">
        <input type="button" value="修改员工信息" id="modifyEmp">
        <input type="button" value="添加/修改员工信息" id="addOrModifyEmp">
      </div>

      <br/><br/><br/><br/>
      <div class="center">
        <table align="center" border="1" width="500px" id="empInfo">
          <caption><b>员工信息表</b></caption>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>薪资</th>
            <th>操作</th>
          </tr>

        </table>
      </div>

    </div>

  </body>
</html>